<%--
  Created by IntelliJ IDEA.
  User: 61741
  Date: 2018/1/12
  Time: 17:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>所有商品</title>
    <meta charset="utf-8">
    <jsp:include page="../common/portal-head.jsp"></jsp:include>
    <link rel="stylesheet" type="text/css" href="${ctx}/resources/portal/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/resources/portal/css/shopslider.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/resources/portal/css/app.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/resources/portal/css/page.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/resources/portal/css/allgoods.css">
    <style>
        .goods-filter-wrap{
            height: 2rem;
            margin-top:0.5rem;
            background:#FFFFFF;
            font-size: 0;
            -webkit-text-size-adjust:none;
        }
        .seller-filiter{
            display: inline-block;
            height: 100%;
            width: 3.5rem;
            border: solid 1px #D1D1D1;
            text-align: center;
            cursor: pointer;
        }
        .seller-filiter span{
            font-size: 0.8rem;
            line-height: 2rem;
            font-weight: 600;
        }
        .seller-filiter img{
            height:0.8rem;
        }
        .menu-button{
            float: right;
            cursor: pointer;
        }
        /*商品列表*/
        .goods-info-list{
            width: 100%;
            vertical-align: top;
            position: relative;
        }
        .goods-info-list table th{
            padding-left:0.5rem;
            height: 19.5rem;
            background: #fff;
            cursor: pointer;
        }
        .sale-goods-item {
            width:24%;
            display:inline-block;
            margin-left:9px;
            cursor: pointer;
        }
        .sale-goods-item:first-child{
            margin-left:0;
        }
        .sale-goods-item:hover
        {
            box-shadow: -2px 3px 8px #333;
        }
        .goods-item-pic{
            width: 100%;
            height: 11.3rem;
            position: relative;
            display: block;
        }
        .goods-item-pic img{
            width: 100%;
            height: 100%;
        }
        .goods-item-info{
            width: 100%;
            display: block;
            margin: 0;
            position: relative;
            text-align: center;
            color: rgb(89, 89, 89);
        }
        .goods-name{
            display: block;
            font-size: 0.8rem;
            font-weight:500;
            line-height:1rem;
            width: 90%;
            text-align: left;
            margin:0.5rem auto;
            height: auto;
            overflow-y: hidden;
            display: block;
        }
        .goods-price{
            font-size: 1.5rem;
            line-height: 2rem;
            text-align: center;
            display: block;
        }
        .add-cart{
            height: 2rem;
            width: 9rem;
            font-weight:500;
            font-size: 1rem;
            line-height: 1.5rem;
            border:black solid 0.1rem;
            border-radius: 0.5rem;
            margin:0.5rem auto;
        }
        .add-shop-cart{
            width:100%;
            font-weight:500;
            font-size: 1rem;
            line-height: 2rem;
            display:inline-block;
        }

        .add-shop-cart img{
            height: 2rem;
            vertical-align: middle;
        }
        i.fa.fa-long-arrow-up {
            font-size:1rem;
        }
        .seller-filiter:hover{
            color: #F34B91;
        }


    </style>
</head>
<body>
<div class="page-container">
    <jsp:include page="../portal/topmenu.jsp"></jsp:include>
    <div class="slider-wrap">
        <div class="search-wrap">
            <div class="search-input">
                <input type="text" name="">
                <img src="${ctx}/resources/portal/img/allgoods_search.png">
            </div>
        </div>
        <div class="slider">
            <div class="slider-img">
                <ul class="slider-img-ul">
                    <li><img src="${ctx}/resources/portal/img/slider-5.jpg"></li>
                    <li><img src="${ctx}/resources/portal/img/banner/shop_silder.jpg"></li>
                    <li><img src="${ctx}/resources/portal/img/slider-2.jpg"></li>
                    <li><img src="${ctx}/resources/portal/img/slider-3.jpg"></li>
                    <li><img src="${ctx}/resources/portal/img/slider-4.jpg"></li>
                    <li><img src="${ctx}/resources/portal/img/slider-5.jpg"></li>
                    <li><img src="${ctx}/resources/portal/img/slider-1.jpg"></li>
                </ul>
            </div>
        </div>
        <div class="goods-menu-wrap">
            <span><img src="${ctx}/resources/portal/img/allgoods_menu.png">所有类别</span>
            <ul>
                <li><a>男式内裤<i class="fa fa-chevron-right"></i></a></li>
                <li><a>女士内裤<i class="fa fa-chevron-right"></i></a></li>
                <li><a>儿童内裤<i class="fa fa-chevron-right"></i></a></li>
                <li><a>布料<i class="fa fa-chevron-right"></i></a></li>
                <li><a>辅料<i class="fa fa-chevron-right"></i></a></li>
                <li><a>其他<i class="fa fa-chevron-right"></i></a></li>
            </ul>
        </div>
        <div class="ad-wrap">
            <div class="title">
                <span><strong>排行榜</strong>高级内衣便宜直销</span>
            </div>
            <div class="sale-num">
                <label>昨日新增采购量<span>2093<i class="fa fa-long-arrow-up"></i></span></label>
            </div>
            <div class="info-list">
                <ul>
                    <li><a><strong>【采购】</strong>内衣便宜直销</a><span>10/06</span></li>
                    <li><a><strong>【采购】</strong>内衣便宜直销</a><span>10/06</span></li>
                    <li><a><strong>【采购】</strong>内衣便宜直销</a><span>10/06</span></li>
                    <li><a><strong>【采购】</strong>内衣便宜直销</a><span>10/06</span></li>
                </ul>
            </div>
            <div class="img-wrap">
                <img src="${ctx}/resources/portal/img/banner/loginqrcode.jpg">
            </div>
        </div>
    </div>
    <div class="content-wrap">
        <div class="all-goods-list">
            <div class="goods-filter-wrap">
                <div class="seller-filiter">
                    <span>综合</span>
                    <i class="fa fa-long-arrow-up"></i>
                </div>
                <div class="seller-filiter">
                    <span>人气</span>
                    <i class="fa fa-long-arrow-up"></i>
                </div>
                <div class="seller-filiter">
                    <span>新品</span>
                    <i class="fa fa-long-arrow-up"></i>
                </div>
                <div class="seller-filiter">
                    <span>销量</span>
                    <i class="fa fa-long-arrow-up"></i>
                </div>
                <div class="seller-filiter">
                    <span>价格</span>
                    <i class="fa fa-long-arrow-up"></i>
                </div>
                <img class="menu-button" src="${ctx}/resources/portal/img/menu_button.png">
            </div>
            <div class="goods-info-list" id="goodlist">
                <div class="sale-goods-item">
                            <div class="goods-item-pic">
                                <img src="${ctx}/resources/portal/img/banner/goods-big.jpg">
                            </div>
                            <div class="goods-item-info">
                                <div class="goods-name">
	                	<span>古今薄款性感内衣古今薄款性感内衣古今薄款性感内衣
	                	</span>
                                </div>
                                <div class="goods-price">
                                    <span >￥99</span>
                                </div>
                                <div class="add-cart">
                                    <span class="add-shop-cart"><img src="${ctx}/resources/portal/img/add_cart.png">加入购物车</span>
                                </div>
                            </div>
                        </div>
                        <div class="sale-goods-item">
                            <div class="goods-item-pic">
                                <img src="${ctx}/resources/portal/img/banner/goods-big.jpg">
                            </div>
                            <div class="goods-item-info">
                                <div class="goods-name">
	                	<span>古今薄款性感内衣古今薄款性感内衣古今薄款性感内衣
	                	</span>
                                </div>
                                <div class="goods-price">
                                    <span >￥99</span>
                                </div>
                                <div class="add-cart">
                                    <span class="add-shop-cart"><img src="${ctx}/resources/portal/img/add_cart.png">加入购物车</span>
                                </div>
                            </div>
                        </div>
                       <div class="sale-goods-item">
                            <div class="goods-item-pic">
                                <img src="${ctx}/resources/portal/img/banner/goods-big.jpg">
                            </div>
                            <div class="goods-item-info">
                                <div class="goods-name">
	                	<span>古今薄款性感内衣古今薄款性感内衣古今薄款性感内衣
	                	</span>
                                </div>
                                <div class="goods-price">
                                    <span >￥99</span>
                                </div>
                                <div class="add-cart">
                                    <span class="add-shop-cart"><img src="${ctx}/resources/portal/img/add_cart.png">加入购物车</span>
                                </div>
                            </div>
                        </div>
                        <div class="sale-goods-item">
                            <div class="goods-item-pic">
                                <img src="${ctx}/resources/portal/img/banner/goods-big.jpg">
                            </div>
                            <div class="goods-item-info">
                                <div class="goods-name">
	                	<span>古今薄款性感内衣古今薄款性感内衣古今薄款性感内衣
	                	</span>
                                </div>
                                <div class="goods-price">
                                    <span >￥99</span>
                                </div>
                                <div class="add-cart">
                                    <span class="add-shop-cart"><img src="${ctx}/resources/portal/img/add_cart.png">加入购物车</span>
                                </div>
                            </div>
                        </div>
            </div>
        </div>
        <div id="page" class="page_div"></div>
    </div>
</div>
<jsp:include page="../portal/footer.jsp"></jsp:include>
<script  id="goodlist-tml" type="text/html">
    <div class="sale-goods-item" onclick="javascript:window.location.href='${ctx}/good/index/\${good_id}'">
        <div class="goods-item-pic">
            <img src="\${img[0]}">
        </div>
        <div class="goods-item-info">
            <div class="goods-name">
	                	<span>\${goodName}
	                	</span>
            </div>
            <div class="goods-price">
                <span >￥\${sale_price}</span>
            </div>
            <div class="add-cart">
                <span class="add-shop-cart"><img src="${ctx}/resources/portal/img/add_cart.png">去购买</span>
            </div>
        </div>
    </div>
</script>
<script src="${ctx}/resources/portal/script/xSlider.js"  type="text/javascript"></script>
<script src="${ctx}/resources/portal/script/page.js"  type="text/javascript"></script>
<script>
    var keyword='${param.keyword}';
    var goodclass ='${param.goodclass}';
    var sortby='';
    $(function () {
        loadgoodlist();

    })
    function  loadgoodlist(pageNum) {
        var data={keyword:keyword,status:1,goodclass:goodclass,sortby:sortby,pageNum:pageNum,pageSize:10}
        asyncAjax({
            url: ctx + "/goodMgr//good/list?"+ $.param(data).replace(/(%5D|%5B)/g, ""),
            beforeSend: function (req) {
                $("#goodlist").html('<i class="fa fa-spin fa-spinner"></i>正在刷新数据...');
            },
            success: function (res) {
                if (res["result"] == "0") {
                    if (!isEmpty(res["data"]["goods"])) {
                        $("#goodlist").html("");
                        $("#goodlist-tml").tmpl(res["data"]["goods"]).appendTo($("#goodlist"));
                        $("#page").paging({
                            pageNo:pageNum || 1,
                            totalPage:Math.ceil(res.total/10),
                            totalSize: res.total,
                            callback: function(num) {
                                loadgoodlist(num);
                            }
                        })
                    }
                    else {
                        $("#goodlist").html('<div class="alert alert-warning">未找到对应商品!</div>');
                    }
                }
                else {
                    bootbox.alert(res["msg"]);
                }
            }

        })

    }

</script>
</body>
</html>
